<template>
  <div>
    <!-- 高级查询开始 -->
    <div v-show="searchVisible" class="top-search">
      <el-form ref="advancedSearchRef" :model="advancedSearch">
        <el-row :gutter="20" style="margin-bottom: 10px">
          <el-col>
            <span class="textCss">名字 :</span>
            <el-input
              v-model="advancedSearch.name"
              prop="name"
              placeholder="名字"
              style="width: 230px"
            >
            </el-input>

            <span class="textCss">年度 :</span>
            <el-input
              v-model="advancedSearch.year"
              prop="year"
              placeholder="年度"
              style="width: 230px"
            >
            </el-input>

            <span class="textCss">网登编号 :</span>
            <el-input
              v-model="advancedSearch.loginNumber"
              prop="loginNumber"
              placeholder="网登编号"
              style="width: 230px"
            >
            </el-input>

            <span class="textCss">批次 :</span>
            <el-input
              v-model="advancedSearch.batch"
              placeholder="批次"
              style="width: 230px"
              prop="batch"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <span class="textCss">民族 :</span>
            <el-input
              v-model="advancedSearch.nation"
              placeholder="民族"
              style="width: 230px"
              prop="nation"
            >
            </el-input>
            <span class="textCss">学历 :</span>
            <el-input
              v-model="advancedSearch.cultureralProgram"
              placeholder="学历"
              style="width: 230px"
              prop="cultureralProgram"
            >
            </el-input>

            <span class="textCss">户籍类型 :</span>
            <el-input
              v-model="advancedSearch.householdType"
              placeholder="户籍类型"
              style="width: 230px"
              prop="householdType"
            >
            </el-input>
            <div class="footer-button">
              <el-button type="primary" plain @click="allSearch"
                >查询</el-button
              >
              <el-button type="info" plain @click="reset">重 置</el-button>
              <el-button @click="advancedQueryClose">关 闭</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 高级查询结束 -->
    <!-- 顶部功能按钮开始 -->
    <el-header class="top_button">
      <div class="left-panel">
        <el-button type="danger" plain @click="all_delete">批量删除</el-button>
        <el-button type="warning" plain @click="exportfun">导出</el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <div class="mt-4">
            <el-input
              v-model="searchData"
              placeholder="查询内容"
              class="input-with-select"
            >
              <template #prepend>
                <el-select
                  v-model="selectField"
                  placeholder="查询类型"
                  style="width: 115px"
                >
                  <el-option label="姓名" value="name" />
                  <el-option label="性别" value="sex" />
                  <el-option label="批次" value="year" />
                  <el-option label="网登编号" value="login_number" />
                  <el-option label="户籍类型" value="household_type" />
                  <el-option label="学历" value="cultureral_program" />
                  <el-option label="民族" value="nation" />
                </el-select>
              </template>
              <template #append>
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-search"
                  @click="searchNameFun"
                ></el-button>
              </template>
            </el-input>
          </div>

          <el-button type="primary" plain @click="advancedQuery"
            >高级查询</el-button
          >
        </div>
      </div>
    </el-header>

    <!-- 顶部功能按钮结束 -->
    <!-- 主体表格开始 -->
    <MyTable
      :columns="columns"
      ref="tableRef"
      :data="allList"
      @handleSelectionChange_emit="handleSelectionChange_emit"
    >
      <el-table-column type="selection" width="55" />
      <template v-for="(item, index) in columns" :key="index">
        <el-table-column
          :fixed="index == 0"
          :label="item.name"
          :prop="item.prop"
          v-if="item.show"
          show-overflow-tooltip
          sortable
          width="120"
        />
      </template>
      <el-table-column fixed="right" label="操作" width="120">
        <template v-slot="scope">
          <el-button
            type="text"
            size="small"
            style="color: orange"
            @click="updateForm(scope.row.doubleQualifiedId)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            style="color: red"
            @click="tableDelete(scope.row.doubleQualifiedId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </MyTable>
    <!-- 主体表格结束 -->
    <!-- 分页区开始 -->
    <div class="page">
      <el-pagination
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.pageSize"
        :current-page="page.pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <!-- 分页区结束 -->

    <!-- 编辑区域开始 -->
    <el-dialog
      v-model="updateDialogVisible"
      title="编辑预订兵信息"
      width="50%"
      :before-close="handleClose"
    >
      <el-descriptions :column="2" border :model="updateInfo">
        <el-descriptions-item label="姓名">
          <el-input v-model="updateInfo.name" placeholder="请输入" />
        </el-descriptions-item>
        <el-descriptions-item label="民族">
          <el-input v-model="updateInfo.nation" placeholder="请输入" />
        </el-descriptions-item>
        <el-descriptions-item label="年度">
          <el-input v-model="updateInfo.year" placeholder="请输入" />
        </el-descriptions-item>
        <el-descriptions-item label="批次">
          <el-input v-model="updateInfo.batch" placeholder="请输入" />
        </el-descriptions-item>

        <el-descriptions-item label="网登编号">
          <el-input v-model="updateInfo.loginNumber" placeholder="请输入" />
        </el-descriptions-item>
        <el-descriptions-item label="年龄">
          <el-input v-model="updateInfo.age" placeholder="请输入" />
        </el-descriptions-item>

        <el-descriptions-item label="性别">
          <el-select v-model="updateInfo.sex" placeholder="请选择">
            <el-option
              v-for="item in sex_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>

        <el-descriptions-item label="户籍类型">
          <el-select v-model="updateInfo.householdType" placeholder="请选择">
            <el-option
              v-for="item in householdType_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>

        <el-descriptions-item label="学历">
          <el-select
            v-model="updateInfo.cultureralProgram"
            placeholder="请选择"
          >
            <el-option
              v-for="item in cultureralProgram_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="登记报名时间">
          <el-date-picker
            v-model="updateInfo.registrationTime"
            type="datetime"
            placeholder="请输入"
            format="YYYY.MM.DD hh:mm:ss"
            value-format="YYYY.MM.DD hh:mm:ss"
          />
        </el-descriptions-item>
        <el-descriptions-item label="预订兵">
          <el-select v-model="updateInfo.isOrderSoldiers" placeholder="请选择">
            <el-option
              v-for="item in isOrderSoldiers_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="">
          <el-input disabled placeholder="" />
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="updateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateConfirm()">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑区域结束 -->
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs, toRaw } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  showPageApi,
  deleteApi,
  allDeleteApi,
  editFormInfoApi,
  editFormApi,
  exportApi,
  singleSearchApi,
  allSearchApi,
} from "@/api/reserveArms/doubleQualified";
export default defineComponent({
  name: "doubleQualified",
  setup() {
    // const { ctx } = getCurrentInstance();
    // const _this = ctx;
    onMounted(() => {
      showPage_methods.showPage();
    });
    // 查询和导出部分
    const search_state = reactive({
      // 姓名查询
      // 查询内容
      searchData: "",
      //  选择字段
      selectField: "",
      // 高级查询
      searchVisible: false,
      advancedSearch: {},
    });
    const search_methods = {
      get_nowTime() {
        var date = new Date();
        var year = date.getFullYear(); //  返回的是年份
        var month = date.getMonth() + 1; //  返回的月份上个月的月份，记得+1才是当月
        var dates = date.getDate(); //  返回的是几号
        const nowTime = `(${year}/${month}/${dates})`;
        return nowTime;
      },
      // 导出
      async exportfun() {
        const nowTime = search_methods.get_nowTime();
        let blobUrl = await exportApi();
        const a = document.createElement("a");
        a.style.display = "none";
        a.download = `双合格信息${nowTime}`;
        a.href = blobUrl;
        a.click();
        a.remove();
        ElMessage.success("导出成功");
      },
      // 单字段查询
      async searchNameFun() {
        const select = search_state.selectField;
        const searchData = search_state.searchData;
        const res = await singleSearchApi.get(searchData, select);
        if (res.code == 200) {
          ElMessage.success("查询数据成功");
		  showPage_state.allList = res.data;
        } else if (res.data.length == 0) {
          ElMessage.success("查询成功，无此数据");
          showPage_state.allList = res.data;
        } else {
          ElMessage.error("查询出错，请稍后重试！");
        }
        console.log(res);
      },
      // 高级查询
      async allSearch() {
        let data = search_state.advancedSearch;
        const res = await allSearchApi.post(data);
        console.log(res);
        if (res.code === 200 && res.rows.length == 0) {
          ElMessage.success("查询成功，无此数据");
          showPage_state.allList = res.rows;
        } else if (res.code === 200) {
          ElMessage.success("查询成功");
          showPage_state.allList = res.rows;
        } else {
          ElMessage.error("查询出错，请稍后重试！");
        }
      },
      //   重置高级查询
      reset() {
        //   element表单方法没实现
        //  _this.$refs.advancedSearchRef.resetFields();
        search_state.advancedSearch = {};
      },
      advancedQuery() {
        search_state.searchVisible = true;
      },
      //   关闭高级查询
      advancedQueryClose() {
        search_state.searchVisible = false;
        search_state.advancedSearch = {};
      },
    };

    const showPage_state = reactive({
      // 表头行字段
      columns: [
        { name: "姓名", show: true, prop: "name" },
        { name: "性别", show: true, prop: "sex" },
        { name: "年度", show: true, prop: "year" },
        { name: "批次", show: true, prop: "batch" },
        { name: "网登编号", show: true, prop: "loginNumber" },
        { name: "年龄", show: true, prop: "age" },
        { name: "民族", show: true, prop: "nation" },
        { name: "户籍类型", show: true, prop: "householdType" },
        { name: "学历", show: true, prop: "cultureralProgram" },
        { name: "登记报名时间", show: true, prop: "registrationTime" },
        { name: "预定兵", show: true, prop: "isOrderSoldiers" },
      ],
      // 页面展示数据
      allList: [],
      //分页数据
      page: {
        current: 1,
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      visible: false,
    });
    const showPage_methods = {
      changeColumn(columns) {
        showPage_state.columns = columns;
      },
      async showPage() {
        const res = await showPageApi.get(showPage_state.page);
        showPage_state.page.total = res.data.total;
        showPage_state.allList = res.data.result;
      },
      // 改变页码
      handleCurrentChange(newSize) {
        showPage_state.page.pageNum = newSize;
        // 重新获取数据
        showPage_methods.showPage();
      },
      handleSizeChange(newPage) {
        showPage_state.page.pageSize = newPage;
        showPage_methods.showPage();
      },
    };

    const editForm_state = reactive({
      updateDialogVisible: false,
      updateInfo: {},
      updateId: null,
      //一堆下拉框
      householdType_options: [
        {
          value: "农村",
          label: "农村",
        },
        {
          value: "城市",
          label: "城市",
        },
      ],
      cultureralProgram_options: [
        {
          value: "小学",
          label: "小学",
        },
        {
          value: "初中",
          label: "初中",
        },
        {
          value: "高中",
          label: "高中",
        },
        {
          value: "专科",
          label: "专科",
        },
        {
          value: "本科",
          label: "本科",
        },
        {
          value: "硕士",
          label: "硕士",
        },
        {
          value: "博士",
          label: "博士",
        },
      ],

      isOrderSoldiers_options: [
        {
          value: "是",
          label: "是",
        },
        {
          value: "否",
          label: "否",
        },
      ],
      sex_options: [
        {
          value: "男",
          label: "男",
        },
        {
          value: "女",
          label: "女",
        },
      ],
    });
    const editForm_methods = {
      async updateForm(id) {
        editForm_state.updateDialogVisible = true;
        editForm_state.updateId = id;
        const res = await editFormInfoApi.get(id);
        console.log(res);
        editForm_state.updateInfo = res.data;
        console.log(editForm_state.updateInfo.sex);
      },
      async updateConfirm() {
        const id = editForm_state.updateId;
        const res = await editFormApi.put(id, editForm_state.updateInfo);
        if (res.code === 200) {
          ElMessage.success("修改信息成功！");
          showPage_methods.showPage();
          editForm_state.updateDialogVisible = false;
        } else {
          ElMessage.error("修改出错，请稍后重试！");
          editForm_state.updateDialogVisible = false;
        }
      },
      // 确定关闭弹窗
      handleClose() {
        editForm_state.updateDialogVisible = false;
      },
    };

    const delete_state = reactive({
      // 选择要被删除的数据数组
      choosedArray: [],
    });
    const delete_methods = {
      //selection 子组件传递的数据
      handleSelectionChange_emit(selection) {
        // =[] 去重
        delete_state.choosedArray = [];
        // let arr =[]
        selection.map(function (currentValue) {
          delete_state.choosedArray.push(currentValue.doubleQualifiedId);
        });
      },
      // 批量删除
      async all_delete() {
        //  判断用户是否在未选中状态下点击“批量删除”按钮
        let flag = toRaw(delete_state.choosedArray);
        if (flag.length === 0) {
          ElMessageBox.confirm("请先选择要删除的行", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).catch((err) => {
            return err;
          });
          return;
        }
        let deleteArr = toRaw(delete_state.choosedArray);
        const confirmResult = await ElMessageBox.confirm(
          "此操作将永久删除所选数据，请确认?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).catch((err) => {
          return err;
        });
        if (confirmResult !== "confirm") {
          return ElMessage.info("已取消删除");
        }
        await allDeleteApi.delete(deleteArr);
        ElMessage.success("已成功删除该订单");
        showPage_methods.showPage();
      },

      //   单行删除
      async tableDelete(id) {
        const confirmResult = await ElMessageBox.confirm(
          "此操作将永久删除该信息, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).catch((err) => {
          return err;
        });
        if (confirmResult !== "confirm") {
          return ElMessage.info("已取消删除");
        }
        await deleteApi.delete(id);
        ElMessage.success("已成功删除该订单");
        showPage_methods.showPage();
      },
    };

    return {
      ...toRefs(showPage_state),
      ...showPage_methods,
      ...toRefs(editForm_state),
      ...editForm_methods,
      ...toRefs(delete_state),
      ...delete_methods,
      ...toRefs(search_state),
      ...search_methods,
    };
  },
});
</script>

<style  scoped>
.form-closex {
  display: flex;
}
/* 分页条居中 */
.el-pagination {
  margin-top: 10px;
  align-items: center;
  justify-content: center;
}
.top-search {
  width: 100%;
}
.top-search .textCss {
  font-size: 15px;
  margin-left: 30px;
  margin-right: 10px;
}

.top-search .inputCss {
  width: 210px;
}
.footer-button {
  margin-left: 80px;
  display: inline-block;
}

.top_button {
  display: flex;
  justify-content: space-between;
}
</style>




